<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8"/>
    <link rel="shortcut icon"
          href="https://static-index-4gtuqm3bfa95c963-1304825656.tcloudbaseapp.com/official-website/favicon.svg"
          mce_href="https://static-index-4gtuqm3bfa95c963-1304825656.tcloudbaseapp.com/official-website/favicon.svg"
          type="image/x-icon"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <link rel="stylesheet" href="../css/index.css">
    <title>建规学院意见反馈</title>
    <style>

        .main {
            width: 100vw;
            height: 100vh;
            display: flex;
            flex-direction: column;
        }

        .line {
            width: 90vw;
            margin: 10px 5vw;
        }

        .textarea {
            height: 100px;
            padding: 5px;
        }

        .bold {
            font-size: 16px;
            font-weight: bold;
        }

        .img-box {
            max-height: 100px;
            overflow: hidden;
        }

        .img {
            min-width: 60px;
            max-width: 120px;
            min-height: 60px;
            max-height: 100px;
        }
    </style>
</head>

<body>
<div class="main">
    <label for="text" class="line label">
        <span class="bold">请输入您的反馈信息:</span>
    </label>
    <textarea class="line textarea" id="text" placeholder="反馈"></textarea>
    <label for="image" class="line label">
        <span class="bold">图片:</span>
    </label>
    <div class="line">
        <button class="upload-button" id="uploadImage" onclick="document.getElementById('image').click()">上传图片</button>
    </div>
    <input type="file" id="image" style="display: none">
    <div class="line img-box"></div>
    <button class="line submit button">提交</button>
    <div id="loginResult"></div>
</div>

</body>
<script src="https://mat1.gtimg.com/www/asset/lib/jquery/jquery/jquery-1.11.1.min.js"></script>
<script src="/public/js/image.js"></script>
<script>
    const token = localStorage.getItem("userToken")
    window.onload = function (){
        /* 进入首页token验证 */
        if (!token){
            location.href = "/public/user/login.html"
        }
    }
    /*反馈提交锁，执行其他操作时不允许提交反馈*/
    let canSubmit = true

    /*图片输入框*/
    const myFile = document.getElementById('image')
    /*文本输入框*/
    const textDom = document.querySelector("#text")
    /*提交表单*/
    const submitDom = document.querySelector(".submit")

    const uploadNode = document.querySelector("#uploadImage")
    /*限制文件大小*/
    const maxSize = 1048000
    let imgUrl = null
    submitDom.addEventListener("click", function () {
        const context = textDom.value.trim()
        if (!canSubmit) return alert("图片上传中，请稍后")
        if (context) {
            $.ajax("/user/addFeedback", {
                method: "post",
                processData: false,
                data: `content=${context}&imageUrl=${imgUrl}`,
                headers: {
                    "Authorization": `Bearer ${token}`
                },
                success:function (result) {
                    if (result.code === 200) {
                        alert("反馈提交成功，即将返回首页")
                        textDom.value = ""
                        myFile.value = null
                        /* 返回并刷新 */
                        window.location.href = document.referrer
                        // history.back()
                    } else {
                        alert(result.msg)
                    }

                },
                error:function (e) {
                    alert("失败")
                }
            })
        }else{
            alert("反馈内容不能为空")
        }

    })
    myFile.onchange = async function (e) {
        canSubmit = false
        const file = e.target.files[0]
        const resultObj = await compressImage(file)
        const {blob} = resultObj
        const {size} = blob
        if (size > maxSize) {
            alert("文件不能超过1M")
            uploadNode.innerHTML = "图片过大，重新上传"
            canSubmit = true
            return myFile.value = null
        }
        const formData = new FormData()
        formData.append("file",blob)
        uploadNode.innerHTML = "上传中..."
        myFile.disabled = true
        $.ajax("/file/uploadImage",{
            method: "post",
            contentType: false,
            processData: false,
            data: formData,
            headers: {
                "Authorization": `Bearer ${token}`
            },
            success: function (result) {
                const {data, code} = result
                if (code === 200) {
                    imgUrl = data
                    showImage(imgUrl)
                    alert("图片上传成功")
                } else {
                    alert(result.msg)
                }
            },
            error: function () {
                alert("发生错误，请联系管理员")
            },
            complete: function () {
                uploadNode.innerHTML = "上传图片"
                myFile.disabled = false
                canSubmit = true
            }
        })

    }

    function showImage(imgUrl) {
        const imgBox = document.querySelector(".img-box")
        imgBox.innerHTML = ""
        const img = document.createElement("img")
        img.classList.add("img")
        img.src = imgUrl
        imgBox.appendChild(img)
    }



</script>

</html>
